<template>
	<view class="box-swiper-slide">
		<swiper
			:style="item.css"
			:indicator-dots="item.isIndicatorDots"
			:indicator-color="item.indicatorColor"
			:indicator-active-color	="item.indicatorActiveColor"
			:autoplay="item.autoplay"
			:interval="item.interval"
			:duration="item.duration"
			:circular="item.circular">
			<swiper-item
				@click="$_to(data.url)"
				v-for="data in item.list">
				<view class="swiper-item-image">
					<image :src="data.image" mode="widthFix"></image>
				</view>
				<view class="swiper-item-title" v-if="data.title">
					{{data.title}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"box-swiper-slide",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.box-swiper-slide{
	swiper{
		margin: 25rpx;
		overflow: hidden;
		border-radius: 10rpx;
		swiper-item{
			position: relative;
			.swiper-item-title{
				width: 100%;
				height: 80rpx;
				background-color:rgba(0,0,0,0.5);
				color: #FFF;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				line-height: 28rpx;
				font-weight: bold;
			}
		}
	}
}
</style>